<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
		</cu-custom>
		<view>
			<view class="content-nav nav padding-xs bg-white">
				<view class="cu-item" :class="currview=='lesson'?'cur':''" @click="loadComment(1,'lesson')">课程</view>
				<view class="cu-item" :class="currview=='special'?'cur':''" @click="loadComment(1,'special')">专栏</view>
				<view class="cu-item" :class="currview=='section'?'cur':''" @click="loadComment(1,'section')">章节</view>
			</view>
			<view class="text-empty text-center" v-if="data.comments.length==0">
				<text class="text-gray">空空如也，要学会制造热度哦~</text>
			</view>
			<view class="comments padding-top padding-bottom-xl" v-else>
				<view class="cu-list menu-avatar" v-for="(item, index) in data.comments" :key="index">
					<view class="cu-item noaf">
						<view class="cu-avatar round lg" :style="'background-image:url('+item.avatar+');'"></view>
						<view class="content">
							<view class="text-black">{{item.nickname}}</view>
							<view class="text-gray text-sm flex" v-if="item.score>0">
								<view class="text-cut stars text-lg">
									<text class="cuIcon-favorfill" :class="item.score>=index?'text-yellow':''" v-for="index in 5" :key="index"></text>
								</view>
							</view>
						</view>
						<view class="action" @click="naviTo(item.url)">
							<view class="text-blue text-cut">《{{item.title}}》</view>
							<view class="text-grey text-xs">{{item.datetime}}</view>
						</view>
					</view>
					<view class="summary">
						<text>{{item.content}}</text>
						<view class="padding-top-xs" v-if="item.comments.length==0">
							<view class="text-red" @click="removeComment(item.id)" v-if="userId==item.uid">
								<text class="cuIcon-delete"></text> 删除
							</view>
							<view class="text-blue" @click="doComment(item.id,item.aid)" v-else>
								<text class="cuIcon-comment"></text> 回复
							</view>
						</view>
						<view class="bg-gray radius padding-sm replys margin-top-xs" v-else>
							<view class="rp-item text-warp" v-for="(value, key) in item.comments" :key="key">
								<text class="text-blue">{{value.nickname}}</text> 回复 <text class="text-blue">@{{item.nickname}}</text>：
								<text>{{value.content}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-center padding" @click="loadComment(page+1,currview)" v-if="loadmore=='more'">
					<view class="text-yellow">查看更多</view>
				</view>
				<view class="text-center padding" v-else>
					<view class="text-gray">没有更多了~</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="showmodal=='comment'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">评价课程</view>
					<view class="action" @tap="showmodal=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding bg-white">
					<form>
						<view class="cu-form-group align-start">
							<view class="title">回复内容</view>
							<textarea class="text-left" maxlength="-1" v-model="comment.content" placeholder="友爱发言的人运气都不会太差哦~"></textarea>
						</view>
					</form>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="showmodal=''">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="submitComment">确定</button>
		
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import core from "@/static/core.js"
	
	export default {
		computed: mapState(['userId', 'hasLogin', 'userName', 'lectorid']),
		data() {
			return {
				page:1,
				currview:'lesson',
				showmodal:'',
				loadmore:'more',
				comment:{
					aid:0,
					cid:0,
					content:""
				},
				data:{
					title:"评价管理",
					comments:[]
				}
			}
		},
		onLoad() {
			if(!this.hasLogin) return core.toast('请先登录','login');
			if(!this.lectorid) return core.navito('lector/apply',{},1);
		},
		onShow() {
			var that = this;
			this.initData('lector/comment',{op:this.currview},function(res){
				that.loadmore = res.comments.length<15 ? 'noMore' : 'more';
			});
		},
		onPullDownRefresh() {
			this.loadComment(1,this.currview);
			uni.stopPullDownRefresh();
		},
		methods:{
			initData(route, data={}, callback=false){
				var that = this;
				core.get(route,function(res){
					if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
						return core.report(res, true);
					}
					that.data = res;
					uni.setNavigationBarTitle({
						title:res.title
					});
					if(callback){
						callback(res);
					}
				},data);
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			unSupport(){
				return core.toast('敬请期待');
			},
			loadComment(page=1,view='lesson'){
				var that = this;
				return core.get('lector/comment',function(res){
					if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined') return core.report(res);
					that.currview = view;
					that.loadmore = res.comments.length<15 ? 'noMore' : 'more';
					if(page==1){
						that.page = 1;
						that.data.comments = res.comments;
					}else{
						if(res.comments.length==0) return core.toast('没有更多了~');
						that.data.comments = that.data.comments.concat(res.comments)
					}
				},{op:view,cid:0,page:page});
			},
			doComment(cid=0, aid=0){
				if(!cid||!aid) return core.toast('参数错误：无效的编号');
				this.comment.aid = aid;
				this.comment.cid = cid;
				this.comment.content = '';
				this.showmodal = 'comment';
			},
			submitComment(){
				if(this.comment.content=='') return core.toast('请输入要回复的内容');
				let postdata = this.comment;
				postdata.type = this.currview;
				var that = this;
				return core.post('comment/post',function(res){
					if(res.type!='success') return core.toast(res.message);
					core.toast(res.message,'','success');
					that.showmodal = '';
					that.loadComment(1,that.currview);
				},{data:postdata});
			},
			removeComment(cid=0){
				if(!this.hasLogin) return core.navito('auth/index',{act:'login'});
				if(!cid) return core.toast('参数异常：无效的评论编号');
				var that = this;
				return core.confirm('删除后不可恢复，是否确定要删除？','删除评价',function(){
					core.get('comment/remove',function(res){
						if(res.type!='success') return core.toast(res.message);
						that.loadComment(1,that.currview);
					},{cid:cid});
				});
			}
		}
	}
</script>

<style>
	page{background-color: #FFFFFF;}
	.comments .cu-item>.action{width: 300upx !important;}
	.cu-list.menu-avatar>.cu-item .content{width: calc(100% - 450upx);}
</style>
